﻿<!DOCTYPE html>
<html lang="zh">

<head resource>
  <include file="../inc/meta.inc" />
  <title>导航菜单</title>
</head>

<body>
  <div id="vapp" v-cloak>
    <el-tabs v-model="type" type="border-card">
      <!-- 主导航-->
      <el-tab-pane label="主导航菜单" name="main">

        <el-tree :data="data_main" node-key="id" :props="defaultProps" default-expand-all
          @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
          :expand-on-click-node="false" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" v-loading="loading">
          <span class="custom-tree-node" slot-scope="{ node, data }">

            <span class="tree-node draghandle" :bold="data.Nav_IsBold" :color="data.Nav_Color"
              :style="'color:'+data.Nav_Color">
              <icon v-if="data.Nav_Icon==null || data.Nav_Icon==''" setup></icon>
              <icon v-else v-html="'&#x'+data.Nav_Icon+';'"></icon>
              <img :src="data.Nav_Logo" v-if="data.Nav_Logo!=''" class="img_logo" @mouseover="hoverlogo(data.Nav_Logo)"
                @mouseout="mouseleave" />
              {{ data.Nav_Name }}
              <span class="link" :title="data.Nav_Target">{{data.Nav_Url}}</span>
            </span>
            <span style="display: inline-block;width: 50px;" @click="data.Nav_IsShow=!data.Nav_IsShow">
              <el-tag type="success" v-if="data.Nav_IsShow">启用</el-tag>
              <el-tag type="danger" v-if="!data.Nav_IsShow">禁用</el-tag>
            </span>

            <el-button type="text" size="mini" @click="append(data,data_main)">
              新增下级
            </el-button>
            <el-button type="text" size="mini" @click="drawer=true;curr=data">
              编辑
            </el-button>
            <el-popconfirm title="确定删除吗？" @confirm="remove(node, data)">
              <el-button type="text" slot="reference">
                删除
              </el-button>
            </el-popconfirm>

          </span>
          </span>
        </el-tree>
        <div class="tree_root">
          <el-button type="text" size="mini" @click="append(null,data_main)" v-loading="loading">
            新增下级
          </el-button>
        </div>
        <div class="btnFooter">
          <el-button type="primary" v-loading="loading_sumbit" :disabled="loading_sumbit" @click="btnSave(data_main)">
            <icon>&#xa038</icon>保存导航菜单
          </el-button>
        </div>
      </el-tab-pane>
      <!--底部导航-->
      <el-tab-pane label="底部导航" name="foot">
        <el-tree :data="data_foot" node-key="id" :props="defaultProps" default-expand-all
          @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop"
          :expand-on-click-node="false" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" v-loading="loading">
          <span class="custom-tree-node" slot-scope="{ node, data }">

            <span class="tree-node draghandle" :bold="data.Nav_IsBold" :color="data.Nav_Color"
              :style="'color:'+data.Nav_Color">
              <icon v-if="data.Nav_Icon==null || data.Nav_Icon==''" setup>&#xa038;</icon>
              <icon v-else v-html="'&#x'+data.Nav_Icon+';'"></icon>
              {{ data.Nav_Name }}<span class="link" :title="data.Nav_Target">{{data.Nav_Url}}</span>
            </span>
            <span style="display: inline-block;width: 50px;" @click="data.Nav_IsShow=!data.Nav_IsShow">
              <el-tag type="success" v-if="data.Nav_IsShow">启用</el-tag>
              <el-tag type="danger" v-if="!data.Nav_IsShow">禁用</el-tag>
            </span>

            <el-button type="text" size="mini" @click="append(data,data_foot)">
              新增下级
            </el-button>
            <el-button type="text" size="mini" @click="drawer=true;curr=data">
              编辑
            </el-button>
            <el-popconfirm title="确定删除吗？" @confirm="remove(node, data)">
              <el-button type="text" slot="reference">
                删除
              </el-button>
            </el-popconfirm>

          </span>
          </span>
        </el-tree>
        <div class="tree_root">
          <el-button type="text" size="mini" @click="append(null,data_foot)" v-loading="loading">
            新增下级
          </el-button>
        </div>
        <div class="btnFooter">
          <el-button type="success" v-loading="loading_sumbit" :disabled="loading_sumbit" @click="btnSave(data_foot)">
            <icon>&#xe85a</icon>保存导航菜单
          </el-button>
        </div>

    </el-tabs>

    <el-drawer title="编辑菜单项" :visible.sync="drawer" :with-header="false" custom-class="drawer_item">
      <div class="drawer-title">编辑菜单项</div>
      <el-form ref="form" :model="curr" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="名称" prop="Nav_Name">
              <el-input v-model="curr.Nav_Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" label-width="5px">

              <el-link type="primary" @click="$refs['icons'].show=true" title="选择图标">
                <icon v-if="curr.Nav_Icon==null || curr.Nav_Icon==''" setup></icon>
                <icon v-else v-html="'&#x'+curr.Nav_Icon+';'"></icon>
              </el-link>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="链接地址">
          <el-input v-model="curr.Nav_Url"></el-input>
        </el-form-item>
        <el-form-item label="提示信息">
          <el-input v-model="curr.Nav_Title"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="curr.Nav_Intro"></el-input>
        </el-form-item>
        <el-form-item label="打开方式">
          <el-select v-model="curr.Nav_Target" :style="{width: '50%'}" placeholder="请选择">
            <el-option key="_blank" label="_blank" value="_blank">
            </el-option>
            <el-option key="_self" label="_self" value="_self">
            </el-option>
            <el-option key="_parent" label="_parent" value="_parent">
            </el-option>
            <el-option key="_top" label="_top" value="_top">
            </el-option>
            <el-option key="_open" label="_open" value="_open">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体">
          <el-input v-model="curr.Nav_Font" style="width: 50%;"></el-input>
          <el-checkbox v-model="curr.Nav_IsBold" label="粗体"></el-checkbox>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="curr.Nav_Color" @change="colorChange" @active-change="colorChange">
          </el-color-picker>
        </el-form-item>

        <el-form-item label="状态">
          <el-checkbox v-model="curr.Nav_IsShow" label="显示"></el-checkbox>
        </el-form-item>
        <el-form-item label="图片">
          <template v-if="!loading_up">
            <upload-img @change="fileupload" id="fileupload" :data="curr">
              <img v-if="curr.Nav_Logo" :src="curr.Nav_Logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </upload-img>
            <el-link type="primary" v-if="curr.Nav_Logo!=''" :disabled="loading_sumbit" @click="clearlogo(curr)">清除图片
            </el-link>
          </template>
          <template v-else>
            <span class="el-icon-loading"></span>
          </template>
        </el-form-item>
      </el-form>
    </el-drawer>

    <icons @change='val=>{curr.Nav_Icon=val}' ref="icons" :selected="curr.Nav_Icon"></icons>
  </div>
</body>

</html>